<!--
* @author wn
* @date 2024/01/19 11:04:58
* @description: 订单详情页 骨架屏
!-->
<!--
此文件为开发者工具生成，生成时间: 2024/1/19上午11:03:48
使用方法：
在 D:\UniAppWorkSpace\eribbit-client-uniapp\dist\dev\mp-weixin\pagesOrder\detail\detail.wxml 引入模板

```
<import src="detail.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
```

在 D:\UniAppWorkSpace\eribbit-client-uniapp\dist\dev\mp-weixin\pagesOrder\detail\detail.wxss 中引入样式
```
@import "./detail.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
<template name="skeleton">
	<view class="sk-container">
		<view class="navbar" style="padding-top: 47px">
			<navigator
				class="back icon-left sk-pseudo sk-pseudo-circle"
				open-type="navigateBack"
			></navigator>
			<view
				class="title sk-transparent sk-text-31-8182-50 sk-text"
				style="background-position-x: 50%"
				>订单详情</view
			>
		</view>
		<scroll-view
			scroll-y="true"
			class="viewport"
			id="scroller"
			enable-back-to-top="true"
		>
			<view class="overview sk-image" style="padding-top: 67px">
				<view
					class="status icon-clock sk-transparent sk-text-0-0000-314 sk-text sk-pseudo sk-pseudo-circle"
					style="background-position-x: 50%"
					>等待付款</view
				>
				<view class="tips">
					<text
						class="money sk-transparent sk-text-0-0000-376 sk-text"
						style="background-position-x: 50%"
						>应付金额: ¥ 118</text
					>
					<text
						class="time sk-transparent sk-text-0-0000-895 sk-text"
						style="background-position-x: 50%"
						>支付剩余</text
					>
					<view
						is="node-modules/@dcloudio/uni-ui/lib/uni-countdown/uni-countdown"
					>
						<view
							class="uni-countdown countdown--uni-countdown data-v-342c352a countdown--data-v-342c352a"
						>
							<text
								class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-200 sk-text"
								style="
									color: rgb(255, 255, 255);
									font-size: 14px;
									width: 22px;
									line-height: 20px;
									border-radius: 3px;
									background-position-x: 50%;
								"
								>00</text
							>
							<text
								class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
								style="color: #fff; font-size: 12px; margin:"
								>时</text
							>
							<text
								class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-96 sk-text"
								style="
									color: rgb(255, 255, 255);
									font-size: 14px;
									width: 22px;
									line-height: 20px;
									border-radius: 3px;
									background-position-x: 50%;
								"
								>27</text
							>
							<text
								class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
								style="color: #fff; font-size: 12px; margin:"
								>分</text
							>
							<text
								class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-931 sk-text"
								style="
									color: rgb(255, 255, 255);
									font-size: 14px;
									width: 22px;
									line-height: 20px;
									border-radius: 3px;
									background-position-x: 50%;
								"
								>46</text
							>
							<text
								class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
								style="color: #fff; font-size: 12px; margin:"
								>秒</text
							>
						</view>
					</view>
				</view>
				<view
					class="button sk-transparent sk-text-28-1250-805 sk-text"
					style="background-position-x: 50%"
					>去支付</view
				>
			</view>
			<view class="shipment">
				<view class="item text-one sk-transparent sk-image">
					没有发货,暂无物流信息
				</view>
				<view class="locate sk-image">
					<view class="text-one sk-transparent sk-text-14-2857-420 sk-text"
						>123123 13111111111</view
					>
					<view class="text-two sk-transparent sk-text-14-2857-815 sk-text"
						>北京市 北京市 东城区13131113123</view
					>
				</view>
			</view>
			<view class="goods">
				<navigator class="navigator" hover-class="none">
					<image class="cover sk-image"></image>
					<view class="meta">
						<view
							class="name ellipsis sk-transparent sk-text-14-2857-367 sk-text"
							>更韧更吸水臻护倍韧4层180克卷纸10卷/提</view
						>
						<text class="attrs sk-transparent sk-text-22-2222-676 sk-text"
							>升级款-高贵白30卷</text
						>
						<view class="prices">
							<view
								class="price symbol sk-transparent sk-text-14-2857-220 sk-text sk-pseudo sk-pseudo-circle"
								>118</view
							>
							<view class="count sk-transparent sk-opacity">1</view>
						</view>
					</view>
				</navigator>
				<view class="row row-top">
					<view class="text sk-transparent sk-text-0-0000-344 sk-text"
						>商品总价:
					</view>
					<view
						class="symbol sk-transparent sk-text-0-0000-506 sk-text sk-pseudo sk-pseudo-circle"
						>118</view
					>
				</view>
				<view class="row">
					<view class="text sk-transparent sk-text-0-0000-878 sk-text"
						>运费:
					</view>
					<view
						class="symbol sk-transparent sk-text-0-0000-373 sk-text sk-pseudo sk-pseudo-circle"
						>0</view
					>
				</view>
				<view class="row row-bottom">
					<view class="text sk-transparent sk-text-0-0000-5 sk-text"
						>应付金额:
					</view>
					<view
						class="symbol primary sk-transparent sk-text-0-0000-159 sk-text sk-pseudo sk-pseudo-circle"
						>118</view
					>
				</view>
			</view>
			<view class="detail">
				<view class="title sk-transparent sk-text-0-0000-486 sk-text"
					>订单信息</view
				>
				<text class="item row sk-transparent sk-text-0-0000-500 sk-text">
					订单编号: 1748178851189493762</text
				>
				<text class="item row copy sk-transparent sk-text-0-0000-562 sk-text"
					>复制</text
				>
				<view class="item sk-transparent sk-text-0-0000-672 sk-text"
					>下单时间: 2024-01-19 11:01:32</view
				>
			</view>
			<view is="components/XtxGuess" class="r">
				<text
					class="caption XtxGuess--caption sk-transparent sk-text-14-2857-225 sk-text sk-pseudo sk-pseudo-circle"
					>猜你喜欢</text
				>
				<view class="guess XtxGuess--guess">
					<view is="components/NavigatorGoods">
						<navigator
							class="navigator-goods NavigatorGoods--navigator-goods"
							hover-class="none"
						>
							<image class="image NavigatorGoods--image sk-image"></image>
						</navigator>
					</view>
					<view is="components/NavigatorGoods">
						<navigator
							class="navigator-goods NavigatorGoods--navigator-goods"
							hover-class="none"
						>
							<image class="image NavigatorGoods--image sk-image"></image>
						</navigator>
					</view>
					<view is="components/NavigatorGoods"></view>
					<view is="components/NavigatorGoods"></view>
					<view is="components/NavigatorGoods"></view>
					<view is="components/NavigatorGoods"></view>
					<view is="components/NavigatorGoods"></view>
					<view is="components/NavigatorGoods"></view>
					<view is="components/NavigatorGoods"></view>
					<view is="components/NavigatorGoods"></view>
				</view>
			</view>
			<view class="toolbar" style="padding-bottom: 34px">
				<view
					class="button sk-transparent sk-text-31-9444-212 sk-text"
					style="background-position-x: 50%"
				>
					取消订单
				</view>
				<view
					class="button primary sk-transparent sk-text-31-9444-952 sk-text"
					style="background-position-x: 50%"
				>
					去支付
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<style lang="scss">
/*
此文件为开发者工具生成，生成时间: 2024/1/19上午11:03:48

在 D:\UniAppWorkSpace\eribbit-client-uniapp\dist\dev\mp-weixin\pagesOrder\detail\detail.wxss 中引入样式
```
@import "./detail.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
	color: transparent !important;
}
.sk-text-31-8182-50 {
	background-image: linear-gradient(
		transparent 31.8182%,
		#eeeeee 0%,
		#eeeeee 68.1818%,
		transparent 0%
	) !important;
	background-size: 100% 88rpx;
	position: relative !important;
}
.sk-text {
	background-origin: content-box !important;
	background-clip: content-box !important;
	background-color: transparent !important;
	color: transparent !important;
	background-repeat: repeat-y !important;
}
.sk-text-0-0000-314 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 36rpx;
	position: relative !important;
}
.sk-text-0-0000-376 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 28rpx;
	position: relative !important;
}
.sk-text-0-0000-895 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 28rpx;
	position: relative !important;
}
.sk-text-15-0000-200 {
	background-image: linear-gradient(
		transparent 15%,
		#eeeeee 0%,
		#eeeeee 85%,
		transparent 0%
	) !important;
	background-size: 100% 40rpx;
	position: relative !important;
}
.sk-opacity {
	opacity: 0 !important;
}
.sk-text-15-0000-96 {
	background-image: linear-gradient(
		transparent 15%,
		#eeeeee 0%,
		#eeeeee 85%,
		transparent 0%
	) !important;
	background-size: 100% 40rpx;
	position: relative !important;
}
.sk-text-15-0000-931 {
	background-image: linear-gradient(
		transparent 15%,
		#eeeeee 0%,
		#eeeeee 85%,
		transparent 0%
	) !important;
	background-size: 100% 40rpx;
	position: relative !important;
}
.sk-text-28-1250-805 {
	background-image: linear-gradient(
		transparent 28.125%,
		#eeeeee 0%,
		#eeeeee 71.875%,
		transparent 0%
	) !important;
	background-size: 100% 64rpx;
	position: relative !important;
}
.sk-text-14-2857-420 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.4rpx;
	position: relative !important;
}
.sk-text-14-2857-815 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-14-2857-367 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 36.4rpx;
	position: relative !important;
}
.sk-text-22-2222-676 {
	background-image: linear-gradient(
		transparent 22.2222%,
		#eeeeee 0%,
		#eeeeee 77.7778%,
		transparent 0%
	) !important;
	background-size: 100% 43.2rpx;
	position: relative !important;
}
.sk-text-14-2857-220 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 33.6rpx;
	position: relative !important;
}
.sk-text-0-0000-344 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 26rpx;
	position: relative !important;
}
.sk-text-0-0000-506 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 26rpx;
	position: relative !important;
}
.sk-text-0-0000-878 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 26rpx;
	position: relative !important;
}
.sk-text-0-0000-373 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 26rpx;
	position: relative !important;
}
.sk-text-0-0000-5 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 26rpx;
	position: relative !important;
}
.sk-text-0-0000-159 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 36rpx;
	position: relative !important;
}
.sk-text-0-0000-486 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 30rpx;
	position: relative !important;
}
.sk-text-0-0000-500 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 26rpx;
	position: relative !important;
}
.sk-text-0-0000-562 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 20rpx;
	position: relative !important;
}
.sk-text-0-0000-672 {
	background-image: linear-gradient(
		transparent 0%,
		#eeeeee 0%,
		#eeeeee 100%,
		transparent 0%
	) !important;
	background-size: 100% 26rpx;
	position: relative !important;
}
.sk-text-14-2857-225 {
	background-image: linear-gradient(
		transparent 14.2857%,
		#eeeeee 0%,
		#eeeeee 85.7143%,
		transparent 0%
	) !important;
	background-size: 100% 44.8rpx;
	position: relative !important;
}
.sk-text-31-9444-212 {
	background-image: linear-gradient(
		transparent 31.9444%,
		#eeeeee 0%,
		#eeeeee 68.0556%,
		transparent 0%
	) !important;
	background-size: 100% 72rpx;
	position: relative !important;
}
.sk-text-31-9444-952 {
	background-image: linear-gradient(
		transparent 31.9444%,
		#eeeeee 0%,
		#eeeeee 68.0556%,
		transparent 0%
	) !important;
	background-size: 100% 72rpx;
	position: relative !important;
}
.sk-image {
	background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
	background: #efefef !important;
	background-image: none !important;
	color: transparent !important;
	border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
	border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
	border-radius: 50% !important;
}
.sk-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: transparent;
}
</style>
